<template>
	<view class="venue-detail">
		<!-- 场地图片轮播 -->
		<swiper class="venue-swiper" circular :indicator-dots="true" :autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(image, index) in venueImages" :key="index">
				<image :src="image" mode="aspectFill" class="swiper-image" @tap="previewImage(index)"></image>
			</swiper-item>
		</swiper>

		<!-- 场地基本信息 -->
		<view class="venue-info">
			<view class="venue-header">
				<text class="venue-name">{{ venueInfo.name }}</text>
				<view class="distance-info" v-if="venueInfo.distance">
					<text class="distance">{{ formatDistance(venueInfo.distance) }}</text>
				</view>
			</view>

			<!-- 地址信息 -->
			<view class="location-info" @tap="openLocation">
				<image class="icon" src="/static/icons/location.png"></image>
				<text class="address">{{ venueInfo.address }}</text>
				<text class="nav-text">导航</text>
			</view>

			<!-- 营业时间 -->
			<view class="business-info">
				<view class="info-label">
					<image class="icon" src="/static/icons/calendar.png"></image>
					<text>营业时间</text>
				</view>
				<text class="info-value">{{ venueInfo.businessStartTime}}-{{venueInfo.businessEndTime}}</text>
			</view>

			<!-- 球场状态 -->
			<view class="status-info">
				<view class="info-label">
					<image class="icon" src="/static/icons/status.png"></image>
					<text>球场状态</text>
				</view>
				<view :class="['status-tag', getStatusClass]">{{ getStatusText }}</view>
			</view>

			<!-- 场地设施 -->
			<view class="facilities">
				<view class="facility-item" v-for="(facility, index) in facilitiesArray" :key="index">
					<text class="facility-text">{{ facility }}</text>
				</view>
			</view>
		</view>

		<!-- 日期选择 -->
		<view class="date-section">
			<view class="section-title">场地预定</view>
			<scroll-view scroll-x class="date-scroll" show-scrollbar="false">
				<view class="date-item" v-for="(date, index) in dateList" :key="index"
					:class="{ active: selectedDate === date.date }" @tap="selectDate(date)">
					<text class="weekday">{{ date.weekday }}</text>
					<text class="day">{{ date.day }}</text>
					<text class="status">预定</text>
				</view>
			</scroll-view>
		</view>

		<!-- 退改政策 -->
		<view class="policy-section">
			<view class="section-title">退改政策</view>
			<text class="policy-text">{{ venueInfo.cancelPolicy || '提前24小时可退改' }}</text>
		</view>

		<!-- 场地介绍 -->
		<view class="description-section">
			<view class="section-title">球场介绍</view>
			<text class="description-text">{{ venueInfo.description || '暂无介绍' }}</text>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<button class="contact-btn" @tap="makePhoneCall">
				<image src="/static/icons/phone.png"></image>
				<text>联系场馆</text>
			</button>
			<button class="book-btn" @tap="goToBooking">立即预订</button>
		</view>

		<!-- 规格选择弹窗 -->
		<uni-popup ref="specPopup" type="bottom">
			<view class="spec-popup">
				<scroll-view scroll-x class="date-scroll" show-scrollbar="false">
					<view class="date-item" v-for="(date, index) in dateList" :key="index"
						:class="{ active: selectedDate === date.date }" @tap="switchDate(date)">
						<text class="weekday">{{ date.weekday }}</text>
						<text class="day">{{ date.day }}日</text>
					</view>
				</scroll-view>

				<view class="popup-header">
					<view class="title-section">
						<text class="title">选择场地</text>
						<view class="spec-tabs">
							<view v-for="spec in venueSpecs" :key="spec.id" class="spec-tab"
								:class="{ active: currentSpecId === spec.id }" @tap="switchSpec(spec)">
								{{ spec.venueSpecName }}
							</view>
						</view>
					</view>
					<text class="close" @tap="closeSpecPopup">×</text>
				</view>

				<scroll-view scroll-y class="time-grid" v-if="currentSpecId">
					<view class="grid-body">
						<view class="grid-row" v-for="(time, timeIndex) in timeSlots" :key="timeIndex"
							:class="{ 'row-selected': isSelected(time) }" @tap="toggleSelectRow(time)">
							<view class="time-column">{{ time }}</view>
							<view class="spec-cell" :class="{ 
									'available': isAvailable(time),
									'selected': isSelected(time),
									'booked': isBooked(time)
								}">
								<text class="price">¥{{ getCurrentSpecPrice() }}</text>
								<text class="book-tag" v-if="isSelected(time)">订</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="empty-tip" v-else>
					<text>暂无可用场地</text>
				</view>

				<view class="selected-venues" v-if="selectedItems.length > 0">
					<view class="selected-title">
						<text>已选场地</text>
						<text class="total">共{{ selectedItems.length }}/4个 / ¥{{ totalPrice }}</text>
					</view>
					<view class="selected-list">
						<view class="selected-item" v-for="(item, index) in selectedItems" :key="index"
							@tap="removeSelected(index)">
							<text class="venue-name">{{ getSpecName(item.specId) }}</text>
							<text class="time-slot">{{ item.time }}</text>
							<text class="price">¥{{ item.price }}</text>
							<text class="remove">×</text>
						</view>
					</view>
				</view>

				<!-- 底部操作栏 -->
				<view class="popup-footer">
					<view class="selected-info">
						<text class="count">已选{{ selectedItems.length }}个场地</text>
						<text class="total-price">合计：¥{{ totalPrice }}</text>
					</view>
					<button class="confirm-btn" @tap="confirmBooking">确认预订</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getVenue
	} from '@/api/venue/venue.js'
	import {
		listSpec
	} from '@/api/venue/spec.js'
	import {
		addOrder
	} from '@/api/order/order.js'

	export default {
		data() {
			return {
				venueId: '',
				venueInfo: {},
				venueImages: [],
				dateList: [],
				selectedDate: '',
				specList: [],
				timeSlots: [], // 从接口获取的时间段
				venueSpecs: [], // 场地规格列表
				selectedItems: [], // 已选择场地
				bookingStatus: {}, // 预订状态表
				currentSpecId: null, // 当前选中的场地规格ID
				isLoading: false,
				userInfo: {},
				phone: ''
			}
		},
		computed: {
			facilitiesArray() {
				if (!this.venueInfo.facilities) return []
				return this.venueInfo.facilities.split(',').filter(item => item.trim())
			},
			totalPrice() {
				return this.selectedItems.reduce((sum, item) => sum + Number(item.price), 0)
			},
			getStatusClass() {
				const statusMap = {
					0: 'status-normal',
					1: 'status-maintenance',
					2: 'status-closed'
				}
				return statusMap[this.venueInfo.status] || 'status-normal'
			},
			getStatusText() {
				const statusMap = {
					0: '正常',
					1: '维护中',
					2: '已关闭'
				}
				return statusMap[this.venueInfo.status] || '正常'
			}
		},
		created() {
			this.initDateList()
		},
		onLoad(options) {
			if (options.id) {
				this.venueId = options.id
				this.getVenueDetail()
			}
			// 获取localstorage的用户信息
			const storage_data = uni.getStorageSync('storage_data')
			if (storage_data && storage_data.vuex_user_info) {
				this.userInfo = storage_data.vuex_user_info
				this.phone = this.userInfo.phonenumber || ''
			}
		},
		methods: {
			async getVenueDetail() {
				try {
					const res = await getVenue(this.venueId)
					if (res.code === 200) {
						this.venueInfo = res.data
						this.venueImages = this.venueInfo.images ? this.venueInfo.images.split(',') : [this.venueInfo
							.coverImage
						]
					}
				} catch (error) {
					console.error('获取场地详情失败:', error)
					uni.showToast({
						title: '获取场地详情失败',
						icon: 'none'
					})
				}
			},
			formatDistance(distance) {
				if (distance >= 1000) {
					return (distance / 1000).toFixed(1) + 'km'
				}
				return distance + 'm'
			},
			previewImage(index) {
				uni.previewImage({
					urls: this.venueImages,
					current: index
				})
			},
			openLocation() {
				uni.openLocation({
					latitude: parseFloat(this.venueInfo.latitude),
					longitude: parseFloat(this.venueInfo.longitude),
					name: this.venueInfo.name,
					address: this.venueInfo.address
				})
			},
			makePhoneCall() {
				if (this.venueInfo.phone) {
					uni.makePhoneCall({
						phoneNumber: this.venueInfo.phone
					})
				} else {
					uni.showToast({
						title: '暂无联系电话',
						icon: 'none'
					})
				}
			},
			goToBooking() {
				this.selectDate(this.dateList[0])
			},
			initDateList() {
				const dates = []
				const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
				const now = new Date()

				for (let i = 0; i < 14; i++) {
					const date = new Date(now)
					date.setDate(now.getDate() + i)

					dates.push({
						date: this.formatDate(date),
						weekday: weekdays[date.getDay()],
						day: date.getDate(),
						month: date.getMonth() + 1
					})
				}

				this.dateList = dates
				this.selectedDate = dates[0].date
			},
			formatDate(date) {
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				return `${year}-${month}-${day}`
			},
			async selectDate(date) {
				this.selectedDate = date.date
				this.selectedItems = [] // 清空已选项
				this.currentSpecId = null // 重置当前选中的场地
				await this.getSpecList() // 等待取场地列表
				this.$refs.specPopup.open()
			},
			async getSpecList() {
				if (this.isLoading) return

				this.isLoading = true
				try {
					const res = await listSpec({
						venueId: this.venueId,
						date: this.selectedDate
					})
					if (res.code === 200) {
						this.venueSpecs = this.processVenueSpecs(res.rows)
						this.bookingStatus = this.processBookingStatus(res.rows)
						this.timeSlots = this.extractTimeSlots(this.bookingStatus)
						// 只有在有场地规格时才设置默认选中
						if (this.venueSpecs && this.venueSpecs.length > 0) {
							this.currentSpecId = this.venueSpecs[0].id
						}
					}
				} catch (error) {
					console.error('获取场地规格失败:', error)
					uni.showToast({
						title: '获取场地规格失败',
						icon: 'none'
					})
				} finally {
					this.isLoading = false
				}
			},
			processVenueSpecs(specs) {
				// 直接返回接口数据
				return specs.map(spec => ({
					id: spec.id,
					venueSpecName: spec.venueSpecName,
					price: spec.price
				}))
			},
			processBookingStatus(specs) {
				// 合并所有场地的预订状态
				const bookStatus = {}
				specs.forEach(spec => {
					if (spec.bookStatus) {
						Object.assign(bookStatus, spec.bookStatus)
					}
				})
				console.log('Current booking status:', bookStatus)
				return bookStatus
			},
			extractTimeSlots(bookStatus) {
				if (!bookStatus || Object.keys(bookStatus).length === 0) return []

				// 从key中提取时间段（如：从"03:00-04:00_1871197369542955009"提取"03:00-04:00"）
				const timeSlots = new Set()
				Object.keys(bookStatus).forEach(key => {
					const timeSlot = key.split('_')[0]
					timeSlots.add(timeSlot)
				})

				// 转换为数组并按时间正确排序
				return Array.from(timeSlots).sort((a, b) => {
					const timeA = a.split('-')[0]
					const timeB = b.split('-')[0]
					return timeA.localeCompare(timeB)
				})
			},
			switchSpec(spec) {
				if (!spec || !spec.id) return
				console.log('Switching to spec:', spec.id)
				// 打印当前场地的预订状态
				const currentSpecStatus = Object.entries(this.bookingStatus)
					.filter(([key]) => key.endsWith(`_${spec.id}`))
					.reduce((acc, [key, value]) => {
						acc[key] = value
						return acc
					}, {})
				console.log('Current spec booking status:', currentSpecStatus)
				this.currentSpecId = spec.id
				this.selectedItems = []
			},
			getCurrentSpecPrice() {
				if (!this.currentSpecId) return 0
				const currentSpec = this.venueSpecs.find(spec => spec.id === this.currentSpecId)
				return currentSpec ? currentSpec.price : 0
			},
			isAvailable(time) {
				const key = `${time}_${this.currentSpecId}`
				// 检查是否存在该时段的状态，且状态为0（可预订）
				return this.bookingStatus[key] === 0
			},
			isSelected(time) {
				return this.selectedItems.some(item =>
					item.time === time && item.specId === this.currentSpecId
				)
			},
			isBooked(time) {
				const key = `${time}_${this.currentSpecId}`
				// 检查是否存在该时段的状态，且状态为1（已预订）
				return this.bookingStatus[key] === 1
			},
			toggleSelect(time) {
				if (!this.currentSpecId) {
					uni.showToast({
						title: '请先选择场地类型',
						icon: 'none'
					})
					return
				}

				if (!this.isAvailable(time)) return

				const index = this.selectedItems.findIndex(item =>
					item.time === time && item.specId === this.currentSpecId
				)

				if (index > -1) {
					this.selectedItems.splice(index, 1)
				} else {
					this.selectedItems.push({
						time,
						specId: this.currentSpecId,
						price: this.getCurrentSpecPrice()
					})
				}
			},
			async confirmBooking() {
				if (this.selectedItems.length === 0) {
					uni.showToast({
						title: '请选择场地',
						icon: 'none'
					})
					return
				}
				if (!this.userInfo) {
					setTimeout(() => {
						uni.showToast({
							title: '您还未登录，请登录首再预订',
							icon: 'none'
						})
					}, 3000)
					this.$tab.reLaunch('/pages/login')
				}

				try {
					// 构建订单数据
					const orderData = {
						phone: this.userInfo.phonenumber,
						venueId: this.venueInfo.id,
						venueName: this.venueInfo.name,
						venueAddress: this.venueInfo.address,
						orderDate: this.selectedDate,
						totalAmount: this.totalPrice,
						orderItems: this.selectedItems.map(item => ({
							venueSpecId: item.specId,
							venueSpecName: this.getSpecName(item.specId),
							timeSlot: item.time,
							price: item.price
						}))
					}

					// 调用创建订单接口
					const res = await addOrder(orderData)
					console.log('创建订单返回数据:', res.data)
					if (res.code === 200) {
						// 保存订单信息到缓存
						const orderInfo = {
							orderId: res.data.orderId,
							date: this.selectedDate,
							items: this.selectedItems,
							venueInfo: this.venueInfo,
							totalAmount: this.totalPrice,
							payParams: {
								timeStamp: res.data.timeStamp,
								nonceStr: res.data.nonceStr,
								packageValue: res.data.packageValue,
								signType: res.data.signType,
								paySign: res.data.paySign
							}
						}
						console.log('存储的订单信息:', orderInfo)
						uni.setStorageSync('orderInfo', orderInfo)

						// 关闭弹窗
						this.$refs.specPopup.close()

						// 跳转到确认订单页
						uni.navigateTo({
							url: '/pages/order/confirm'
						})
					} else {
						uni.showToast({
							title: res.msg || '创建订单失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('创建订单失败:', error)
					uni.showToast({
						title: error.msg || '创建订单失败',
						icon: 'none'
					})
				}
			},
			closeSpecPopup() {
				this.$refs.specPopup.close()
			},
			async switchDate(date) {
				this.selectedDate = date.date
				this.selectedItems = []
				// 重新获取场地列表并重置选中状态
				this.currentSpecId = null
				await this.getSpecList()
			},
			getSpecName(specId) {
				const spec = this.venueSpecs.find(s => s.id === specId)
				return spec ? spec.venueSpecName : ''
			},
			removeSelected(index) {
				this.selectedItems.splice(index, 1)
			},
			// 检查整行是否被选中
			isRowSelected(time) {
				return this.isSelected(time)
			},
			// 选择整行
			toggleSelectRow(time) {
				if (!this.currentSpecId) {
					uni.showToast({
						title: '请先选择场地类型',
						icon: 'none'
					})
					return
				}

				if (this.isBooked(time)) {
					uni.showToast({
						title: '该时段已被预订',
						icon: 'none'
					})
					return
				}

				// 检查是否已达到最大选择数量
				if (this.selectedItems.length >= 4 && !this.isSelected(time)) {
					uni.showToast({
						title: '最多可选4个场次',
						icon: 'none'
					})
					return
				}

				const index = this.selectedItems.findIndex(item =>
					item.time === time && item.specId === this.currentSpecId
				)

				if (index > -1) {
					this.selectedItems.splice(index, 1)
				} else {
					this.selectedItems.push({
						time,
						specId: this.currentSpecId,
						price: Number(this.getCurrentSpecPrice()),
						venueName: this.getSpecName(this.currentSpecId)
					})
				}
			},
			// 定义分享给朋友
			onShareAppMessage() {
				return {
					title: this.venueInfo?.name || '推荐一个好球场',
					path: `/pages/venue/detail?id=${this.venueId}`,
					imageUrl: this.venueInfo?.coverImage || '/static/images/default-venue.png',
					success: () => {
						uni.showToast({
							title: '分享成功',
							icon: 'success'
						})
					},
					fail: () => {
						uni.showToast({
							title: '分享失败',
							icon: 'none'
						})
					}
				}
			},
			// 定义分享到朋友圈
			onShareTimeline() {
				return {
					title: this.venueInfo?.name || '推荐一个好球场',
					query: `id=${this.venueId}`,
					imageUrl: this.venueInfo?.coverImage || '/static/images/default-venue.png'
				}
			},
			// 处理分享按钮点击
			handleShare() {
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				})
				uni.showToast({
					title: '请点击右上角三个点分享',
					icon: 'none',
					duration: 2000
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.venue-detail {
		min-height: 100vh;
		background: #f8f8f8;
		padding-bottom: 120rpx;

		.venue-swiper {
			width: 100%;
			height: 500rpx;

			.swiper-image {
				width: 100%;
				height: 100%;
			}
		}

		.venue-info {
			background: #fff;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.venue-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.venue-name {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
				}

				.distance-info {
					font-size: 28rpx;
					color: #666;
				}
			}

			.location-info {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				padding: 20rpx 30rpx;
				border-top: 1rpx solid #f5f5f5;

				.icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}

				.address {
					flex: 1;
					font-size: 28rpx;
					color: #333;
				}

				.nav-text {
					font-size: 26rpx;
					color: #4CAF50;
					margin-left: 20rpx;
				}
			}

			.business-info,
			.status-info {
				display: flex;
				align-items: center;
				padding: 20rpx 30rpx;
				border-top: 1rpx solid #f5f5f5;

				.info-label {
					display: flex;
					align-items: center;

					.icon {
						width: 32rpx;
						height: 32rpx;
						margin-right: 16rpx;
					}

					text {
						font-size: 28rpx;
						color: #666;
						margin-right: 16rpx;
					}
				}
			}

			.business-info {
				.info-value {
					flex: 1;
					font-size: 28rpx;
					color: #333;
				}
			}

			.status-info {
				.status-tag {
					padding: 4rpx 16rpx;
					border-radius: 24rpx;
					font-size: 24rpx;
					margin-left: auto;

					&.status-normal {
						background: rgba(76, 175, 80, 0.1);
						color: #4CAF50;
					}

					&.status-maintenance {
						background: rgba(255, 152, 0, 0.1);
						color: #FF9800;
					}

					&.status-closed {
						background: rgba(244, 67, 54, 0.1);
						color: #F44336;
					}
				}
			}

			.facilities {
				display: flex;
				flex-wrap: wrap;
				gap: 16rpx;

				.facility-item {
					padding: 8rpx 20rpx;
					background: #f5f5f5;
					border-radius: 24rpx;

					.facility-text {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
		}

		.date-section {
			background: #fff;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.date-scroll {
				white-space: nowrap;
				margin-top: 20rpx;

				.date-item {
					display: inline-flex;
					flex-direction: column;
					align-items: center;
					padding: 20rpx 30rpx;
					margin-right: 20rpx;
					background: #f5f5f5;
					border-radius: 12rpx;

					&.active {
						background: #4CAF50;

						.weekday,
						.day,
						.status {
							color: #fff;
						}
					}

					.weekday {
						font-size: 24rpx;
						color: #666;
						margin-bottom: 8rpx;
					}

					.day {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 8rpx;
					}

					.status {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
		}

		.policy-section,
		.description-section {
			background: #fff;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
			}
		}

		.policy-text,
		.description-text {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
		}

		.bottom-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			background: #fff;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			padding-bottom: env(safe-area-inset-bottom);
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

			.contact-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 240rpx;
				height: 80rpx;
				background: #f5f5f5;
				border-radius: 40rpx;
				margin-right: 20rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}

				text {
					font-size: 28rpx;
					color: #666;
				}
			}

			.book-btn {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				background: #4CAF50;
				color: #fff;
				font-size: 28rpx;
				border-radius: 40rpx;
				text-align: center;
			}
		}

		.spec-popup {
			background: #fff;
			border-radius: 24rpx 24rpx 0 0;
			height: 85vh;
			display: flex;
			flex-direction: column;

			.popup-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 1rpx solid #eee;

				.title-section {
					flex: 1;

					.spec-tabs {
						display: flex;
						margin-top: 20rpx;

						.spec-tab {
							padding: 10rpx 30rpx;
							font-size: 28rpx;
							color: #666;
							background: #f5f5f5;
							border-radius: 30rpx;
							margin-right: 20rpx;

							&.active {
								background: #4CAF50;
								color: #fff;
							}
						}
					}
				}

				.close {
					font-size: 40rpx;
					color: #999;
					padding: 0 20rpx;
				}
			}

			.time-grid {
				flex: 1;
				overflow-y: auto;

				.grid-body {
					.grid-row {
						display: flex;
						border-bottom: 1rpx solid #eee;
						cursor: pointer;
						transition: background-color 0.3s;

						&.row-selected {
							background-color: rgba(76, 175, 80, 0.1);
						}

						.time-column {
							width: 200rpx;
							padding: 20rpx;
							text-align: center;
							font-size: 26rpx;
							color: #666;
						}

						.spec-cell {
							flex: 1;
							height: 120rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							border-left: 1rpx solid #eee;
							position: relative;

							&.available {
								background: transparent;

								&:active {
									background: #f5f5f5;
								}
							}

							&.selected {
								background: transparent;

								.price {
									color: #4CAF50;
								}
							}

							&.booked {
								background: #f5f5f5;

								.price {
									color: #999;
								}
							}

							.book-tag {
								position: absolute;
								top: 0;
								right: 0;
								background: #4CAF50;
								color: #fff;
								font-size: 20rpx;
								padding: 4rpx 8rpx;
								border-radius: 0 0 0 8rpx;
							}

							.price {
								font-size: 28rpx;
								color: #ff6b35;
							}
						}
					}
				}
			}

			.popup-footer {
				padding: 20rpx 30rpx;
				border-top: 1rpx solid #eee;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: env(safe-area-inset-bottom);
				background: #fff;

				.selected-info {
					display: flex;
					align-items: center;

					.count {
						font-size: 28rpx;
						color: #666;
					}

					.total-price {
						margin-left: 20rpx;
						color: #ff6b35;
						font-weight: bold;
					}
				}

				.confirm-btn {
					width: 240rpx;
					height: 80rpx;
					line-height: 80rpx;
					background: #4CAF50;
					color: #fff;
					font-size: 28rpx;
					border-radius: 40rpx;
					text-align: center;
				}
			}

			.empty-tip {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #999;
				font-size: 28rpx;
			}

			.date-scroll {
				padding: 20rpx 30rpx;
				white-space: nowrap;
				border-bottom: 1rpx solid #eee;

				.date-item {
					display: inline-flex;
					flex-direction: column;
					align-items: center;
					padding: 16rpx 30rpx;
					margin-right: 20rpx;
					background: #f5f5f5;
					border-radius: 12rpx;

					&.active {
						background: #4CAF50;

						.weekday,
						.day {
							color: #fff;
						}
					}

					.weekday {
						font-size: 24rpx;
						color: #666;
						margin-bottom: 8rpx;
					}

					.day {
						font-size: 28rpx;
						color: #333;
					}
				}
			}

			.selected-venues {
				padding: 20rpx 30rpx;
				border-top: 1rpx solid #eee;
				max-height: 300rpx;
				overflow-y: auto;

				.selected-list {
					display: flex;
					flex-wrap: wrap;
					gap: 16rpx;

					.selected-item {
						display: inline-flex;
						align-items: center;
						padding: 12rpx 20rpx;
						background: rgba(76, 175, 80, 0.1);
						border-radius: 8rpx;
						border: 1rpx solid rgba(76, 175, 80, 0.2);
						flex-shrink: 0;

						.venue-name {
							font-size: 26rpx;
							color: #333;
							margin-right: 12rpx;
						}

						.time-slot {
							font-size: 24rpx;
							color: #666;
							margin-right: 12rpx;
						}

						.price {
							font-size: 26rpx;
							color: #ff6b35;
							margin-right: 12rpx;
						}

						.remove {
							font-size: 28rpx;
							color: #999;
							padding: 0 4rpx;
						}
					}
				}
			}
		}
	}
</style>